var vm = new Vue({
	el: '#app',
	data: {
		categoryID: '',
		sortType: '',
		pageNum: 1,
		products: [],
		totalPages: 0,
		totalRecords: 0,
		startPage: 1,
		endPage: 1
	},
	methods: {
		findProducts: function() {
			$.ajax({
				url: "/staybag/getProducts",
				data: {
					styleID: $('#styleID').val(),
					brandID: $('#brandID').val(),
					categoryID: vm.categoryID,
					sortType: vm.sortType,
					page: vm.pageNum
				},
				dataType: "json",
				type: "post",
				success: function(data) {
					vm.products = data.data;
					vm.totalPages = data.totalPages;
					vm.totalRecords = data.totalRecords;
				}
			});
		}
	},
	watch: {
		categoryID: function() {
			vm.findProducts();
		},
		totalPages: function() {
			if (vm.totalPages <= 5) {
				vm.startPage = 1;
				vm.endPage = vm.totalPages;
			} else {
				vm.startPage = vm.pageNum - 2;
				vm.endPage = vm.pageNum + 2;
			}
		},
		pageNum: function() {
			if (vm.totalPages <= 5) {
				vm.startPage = 1;
				vm.endPage = vm.totalPages;
			} else {
				vm.startPage = vm.pageNum - 2;
				vm.endPage = vm.pageNum + 2;
			}
			vm.findProducts();
		},
		sortType: function() {
			vm.findProducts();
		}
		
	}
});